<template>
  <div>
    <a-space class="float_right" v-if="editClkFlag">
      <a-button type="primary">保存</a-button>
      <a-button @click="cancelBtnClkFn">取消</a-button>
    </a-space>

    <a-button type="primary" class="float_right" @click="editclkFn" v-else>编辑</a-button>

    <div style="margin-top：50px;">
      <a-descriptions title=" " :layout="layoutType">
        <a-descriptions-item v-for="(item, key) in personalInfos" :label="labelFilter(key)" :key="key">
          <a-input v-if="editClkFlag" :default-value="item"></a-input>
          <span v-else>{{item}}</span>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<script>
import datas from '../../../utils/data'

export default {
  name: "tabs1",
  props: {
    personalInfos: Object
  },
  data () {
    return {
      personInfoDatas: datas.personInfoDatas,
      editClkFlag: false,
      layoutType: "horizontal",
    };
  },
  methods: {
    editclkFn () {
      this.editClkFlag = true;
      this.layoutType = "vertical";
    },

    cancelBtnClkFn () {
      this.editClkFlag = false;
      this.layoutType = "horizontal";
    },

    labelFilter (str) {
      switch (str) {
        case 'name':
          return '姓名'
        case 'mobile':
          return '手机号码'
        case 'email':
          return '邮箱'
        case 'gender':
          return '性别'
        case 'age':
          return '年龄'
        case 'marriage':
          return '婚姻状况'
        case 'nation':
          return '民族'
        case 'education':
          return '学历'
        case 'political':
          return '政治面貌'
        case 'census':
          return '户籍地址'
        case 'address':
          return '现住址'
        case 'socialSecurityNo':
          return '个人社保账号'
        case 'accumulationFundNo':
          return '个人公积金账号'
        case 'schoolName':
          return '毕业院校'
        case 'schoolMajor':
          return '毕业专业'
        case 'firstJobDate':
          return '首次参加工作时间'
        case 'cardNum':
          return '工资卡账号'
        case 'bankAddress':
          return '开户行地址'
        case 'bankDeposit':
          return '工资卡开户行'
        case 'antuCardType':
          return '证件类型'
        case 'idCard':
          return '证件号码'
        case 'birthday':
          return '出生年月'
        case 'contractName':
          return '紧急联系人姓名'
        case 'contractMobile':
          return '紧急联系人电话'
        case 'contractRelation':
          return '紧急联系人关系'
      }
    }
  },
};
</script>

<style scoped leng="less">
.infos {
  width: 100%;
  margin-left: 20px;
}

.infos div:first-of-type {
  align-items: center;
  justify-content: flex-start;
}

.basicInfo_div {
  color: #a2a2a2;
}

.basicInfo_div p {
  margin-bottom: 0;
}

.tabs_div {
  margin-top: 20px;
}

.editable-add-btn {
  margin: 10px 0;
}

.dsp_flex {
  display: flex;
  display: -webkit-flex;
}

.c_a2 {
  color: #a2a2a2;
}

.desc_p {
  align-items: center;
}

.float_right {
  float: right;
}
</style>